<template>
  <div class="common-page grid-view">
    <div class="m-grids">
      <div v-for="i in 12" :key="i" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('@/assets/img/jizhi.png')})`"></div>
        <p class="grid_label">AAAAb</p>
      </div>
    </div>  
  </div>
</template>

<script>
export default {

}
</script>

<style scope  lang="stylus">
@import '~@/styles/mixins'
@import '~@/styles/tools/m-grid.styl'

.grid-view
  // width: 100%
  .m-grid
    gird-column-ctrl(4)
@media screen and (max-width:320px)
  .grid-wrap .m-grid
    gird-column-ctrl(3)
@media screen and (min-width:321px) and (max-width:374px)
  .grid-wrap .m-grid
    gird-column-ctrl(3)
@media screen and (min-width:375px) and (max-width:414px)
  .grid-wrap .m-grid
    gird-column-ctrl(4)
@media screen and (min-width:415px) // and (max-width:639px)
  .grid-wrap .m-grid
    gird-column-ctrl(5)
</style>
